<template>
	<view class="address-item" v-for="item in list" :key="item.id" @click="addrsChang(item,'')">
		<view class="address-left">
			<view class="address-up">
				<view class="address-name u-line-1">{{item.name}}</view>
				<view class="address-number u-line-1">{{item.phone}}</view>
			</view>
			<view class="address-detail">{{format(item.addr)}}{{item.addr_extra}}</view>
		</view>
		<view class="address-right">
			<view class="address-endt" @click.stop="addrsChang(item,'1')">编辑</view>
		</view>
		<view class="address-delete" @click.stop="deleteChang(item,index)">
			<view class="delete-icon">
				<u-icon name="trash" color="#d72323" size="20"></u-icon>
			</view>
			<view class="delete-text">删除</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"address-item",
		props:{
			list:{
				type:Array,
				default:(()=>{
					return []
				})
			},
			mode:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			format(e){
				return e.replace(/\s/g, "")
			},
			addrsChang(e,t){
				this.$u.vuex('addrs_data',e)
				if(t){
					this.multiRedirect('/subpkg/addressdetails/addressdetails?id=' + e.id)
				}
				if(this.mode&&!t){
					uni.navigateBack()
				}
			},
			deleteChang(e,i){
				uni.showModal({
					title: '提示',
					content: '确认删除该地址?',
					success:(res) =>{
						if (res.confirm) {
							this.$network('/api/address/del',{
								id:e.id
							}).then(res=>{
	
								this.$emit('deleteEvtne',i)
								this.$u.toast('删除成功')
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
		.address-item {
			margin-top: 40rpx;
			width: 100%;
			background: #FFF;
			border-radius: 5px;
			box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			display: flex;
			align-items: initial;
			justify-content: space-between;
			padding: 15px;
			min-height: 220rpx;
			position: relative;
			.address-delete{
				position: absolute;
				bottom: 5px;
				right: 10px;
				display: flex;
				align-items: center;
				border: 1px solid #d72323;
				padding:0 3px;
				font-size: 20rpx;
				color: #d72323;
				border-radius: 5px;
				.delete-icon{
					margin-right:5rpx;
				}
			}
			.address-right{
				width:18% ;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.address-endt{
					font-size: 28rpx;
					color: #666;
					position: relative;
				}
				.address-endt::after{
					position: absolute;
					top: 0px;
					left: -15px;
					width: 1px;
					height: 20px;
					background: #666;
					content: "";
				}
			}
			.address-left {
				width: 78%;
				.address-detail{
					margin-top: 15rpx;
					font-size: 25rpx;
					color: #666;
					line-height: 20px;
					letter-spacing: 2px;
				}
				.address-up {
					display: flex;
					align-items: center;
					.address-number{
						font-size: 30rpx;
						color: #000;
						font-weight: bold;
						max-width: 230rpx;
					}
					.address-name{
						font-size: 30rpx;
						color: #000;
						font-weight: bold;
						margin-right: 20rpx;
					}
				}
			}
		}
</style>